<template>
  <el-card class="box-card">
    <div>
      <!-- 搜索框 -->
      <el-form
        ref="dataFrom"
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
      >
        <el-form-item label="账号：">
          <el-input
            v-model="dataFrom.zh"
            clearable
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="dataFrom.xm"
            clearable
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getDataListBySearch"
          >查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 角色数据表单 -->
      <el-table ref="multipleTable" :data="dataList" border style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="账号" prop="zh" width="110">
        </el-table-column>
        <el-table-column label="姓名" prop="xm" width="80">
        </el-table-column>
        <el-table-column label="账号状态" prop="zt" width="80">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--            <el-button size="mini" type="primary" @click="handleLook(scope.$index, scope.row)">查看详情</el-button>-->
            <!--            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
            <!--            <el-button size="mini" type="danger" @click="handleDelete(scope.row.xh)">删除</el-button>-->
            <el-button v-if="scope.row.zt==='激活'" size="mini" type="danger" @click="changeZt(scope.row.zh)">禁用
            </el-button>
            <el-button v-if="scope.row.zt==='禁用'" size="mini" type="success" @click="changeZt(scope.row.zh)">激活
            </el-button>
            <el-button v-if="scope.row.zt==='激活'" size="mini" @click="openDialogRole(scope.row)">修改角色
            </el-button>
            <el-button v-if="scope.row.zt==='激活'" size="mini" @click="openDialogMenu(scope.row)">修改菜单
            </el-button>
            <el-button v-if="scope.row.zt==='激活'" size="mini" @click="openDialogPerm(scope.row)">修改权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑账号角色 -->
      <el-dialog
        :visible.sync="dialogFormVisibleRole"
        title="编辑角色"
        width="35%"
      >
        <el-form :model="ChangeRole">
          <el-form-item label="角色" label-width="120px">
            <el-select v-model="ChangeRole.roleId" allow-create clearable default-first-option filterable
                       placeholder="请选择">
              <el-option
                v-for="{id,name} in roles"
                :key="id"
                :label="name"
                :value="id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleRole = false">取 消</el-button>
          <el-button type="primary" @click="changeRole()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查看打开的界面 -->
      <el-dialog
        :model="formLook"
        :visible.sync="dialogFormVisibleLook"
        title="员工详细信息"
        width="50%"
      >
        <el-descriptions title="基础信息">
          <el-descriptions-item label="姓名">
            {{ this.formLook.xm }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ this.formLook.nl }}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{ this.formLook.csrq }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ this.formLook.xb }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ this.formLook.sfz }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ this.formLook.sjh }}
          </el-descriptions-item>
          <el-descriptions-item label="民族">
            {{ this.formLook.mz }}
          </el-descriptions-item>
          <el-descriptions-item label="籍贯">
            {{ this.formLook.jg }}
          </el-descriptions-item>
          <el-descriptions-item label="户口所在地">
            {{ this.formLook.hkszd }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人">
            {{ this.formLook.jjlxr }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人电话">
            {{ this.formLook.jjlxrdh }}
          </el-descriptions-item>
        </el-descriptions>
        <!--单独一行-->
        <el-descriptions>
          <el-descriptions-item label="现住址">
            {{ this.formLook.xzz }}
          </el-descriptions-item>
        </el-descriptions>
        <!--单独一行-->
        <el-descriptions>
          <el-descriptions-item label="银行卡号">
            {{ this.formLook.yhkh }}
          </el-descriptions-item>
          <el-descriptions-item label="银行卡备注">
            {{ this.formLook.yhkbz }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="学历信息">
          <el-descriptions-item label="毕业学校">
            {{ this.formLook.byxx }}
          </el-descriptions-item>
          <el-descriptions-item label="学历">
            {{ this.formLook.xl }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ this.formLook.zy }}
          </el-descriptions-item>
          <el-descriptions-item label="职称及证件">
            {{ this.formLook.zcjzj }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="岗位信息">
          <el-descriptions-item label="档案号">
            {{ this.formLook.dah }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ this.formLook.bm }}
          </el-descriptions-item>
          <el-descriptions-item label="职务">
            {{ this.formLook.zw }}
          </el-descriptions-item>
          <el-descriptions-item label="入职日期">
            {{ this.formLook.rzrq }}
          </el-descriptions-item>
          <el-descriptions-item label="离职日期">
            {{ this.formLook.rzrq }}
          </el-descriptions-item>
          <el-descriptions-item label="就职状态">
            {{ this.formLook.jzzt }}
          </el-descriptions-item>
          <el-descriptions-item label="招聘来源">
            {{ this.formLook.zply }}
          </el-descriptions-item>
          <el-descriptions-item label="入场年限">
            {{ this.formLook.rcnx }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="合同信息">
          <el-descriptions-item label="合同">
            {{ this.formLook.ht }}
          </el-descriptions-item>
          <el-descriptions-item label="合同开始">
            {{ this.formLook.htks }}
          </el-descriptions-item>
          <el-descriptions-item label="合同结束">
            {{ this.formLook.htjs }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <!-- 编辑账号菜单页面 -->
      <el-dialog
        :visible.sync="dialogFormVisibleMenu"
        title="编辑菜单"
        width="35%"
      >
        <el-tree :check-strictly="true"
                 :data="AllMenu"
                 :default-checked-keys="menu"
                 :props="PropsMenu"
                 accordion
                 node-key="menuId"
                 show-checkbox
                 @check="InsertMenu"></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleMenu = false">取 消</el-button>
          <el-button type="primary" @click="changeMenu()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑账号权限页面 -->
      <el-dialog
        :visible.sync="dialogFormVisiblePerm"
        title="编辑权限"
        width="35%"
      >
        <el-tree :check-strictly="true"
                 :data="AllPerm"
                 :default-checked-keys="perm"
                 :props="PropsMenu"
                 accordion
                 node-key="perm"
                 show-checkbox
                 @check="InsertPerm"></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblePerm = false">取 消</el-button>
          <el-button type="primary" @click="changePerm()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 页号 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :total="totalPage"
        layout="total ,sizes,prev,pager,next,jumper"
        style="margin-top: 30px"
        @size-change="sizeChangeHandle"
        @current-change="CurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
import xlsx from "vform-builds";

export default {
  name: "UserList",
  data() {
    return {
      username: sessionStorage.getItem("username"),
      multipleSelection: [], //批量操作数组
      dataFrom: {},//搜索
      formLook: {}, //查看
      insertForm: {},//新增
      ChangeRole: {}, //编辑
      dataList: [], //页面展示的数据集合
      UserSearchOption: {},//搜索选项
      fileList: [], //上传文件，以数组方式上传
      fileListed: 0, //上传过的文件
      fileLimit: 5, //文件上传个数限制
      fileSize: 10,//文件限制大小
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建员工界面
      dialogFormVisibleRole: false, //默认关闭编辑员工界面
      dialogFormVisibleLook: false,//默认关闭查看员工界面
      dialogFormVisibleMenu: false,//默认关闭修改菜单界面
      dialogFormVisiblePerm: false,//默认关闭修改权限界面
      dataListFrom: "getDataList",
      ChangeEmployee: "",//操作的员工账号
      AllMenu: [],//所有菜单
      menu: [],//账号所拥有的菜单
      menu1: [],//未修改前账号所拥有的菜单
      PropsMenu: {//菜单列表结构
        children: 'children',
        label: 'name'
      },
      roles: [],//角色列表
      perm: [],//账号所拥有的权限
      AllPerm: [],//所有权限
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.SizeOrCurrentChangeAfter();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.SizeOrCurrentChangeAfter();
    },
    //在更改数组大小或者页号前，判断数据来源
    SizeOrCurrentChangeAfter() {
      if (this.dataListFrom === "getDataList")
        this.getDataList();
      else this.getDataListBySearch();
    },
    //新增页面的确认键
    handleInsert() {
      if (this.insertForm.csrq_date !== undefined) {
        this.insertForm.csrq = this.insertForm.csrq_date.toLocaleDateString()
      }
      if (this.insertForm.htks_date !== undefined) {
        this.insertForm.htks = this.insertForm.htks_date.toLocaleDateString()
      }
      if (this.insertForm.htjs_date !== undefined) {
        this.insertForm.htjs = this.insertForm.htjs_date.toLocaleDateString()
      }
      const data = {
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex),
        user: this.insertForm
      }
      this.$http.post("/user/insert", data).then((res) => {
        this.cutDataList(res);
        this.dialogFormVisible = false;
        this.insertForm = []
      });
    },
    //打开编辑角色页面
    openDialogRole(data) {
      this.$http.post("/role/getRoleList").then((res) => {
        this.roles = res;
      });
      this.$http.post("/role/getRoleIdByZh/" + data.zh).then((res) => {
        data.roleId = res;
      });
      this.ChangeRole = data
      this.dialogFormVisibleRole = true;
    },
    //修改角色
    changeRole() {
      this.$http.post("/user/changeRole", this.ChangeRole).then((res) => {
        this.getDataList();
      });
      this.dialogFormVisibleRole = false;
    },
    //将数据分配到数组中
    cutDataList(res) {
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
    },
    //查询所有数据
    getDataList() {
      this.dataListFrom = "getDataList";
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/user/getUserPage", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    //查询单条数据
    getDataListBySearch() {
      this.dataListFrom = "getDataListBySearch";
      const data = {
        user: this.dataFrom,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex)
      }
      this.$http.post("/user/getUserBySearch", data).then((res) => {
        this.cutDataList(res);
      });
    },
    //查看按钮
    handleLook(index, item) {
      this.dialogFormVisibleLook = true;
      this.formLook = item;
    },
    //编辑按钮
    handleEdit(index, item) {
      this.dialogFormVisibleRole = true; //打开编辑员工界面
      //回显数据
      this.ChangeRole = item;
    },
    //删除按钮
    handleDelete(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 表示处理的是 删除操作
          const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
          this.$http.post("/user/delete/" + item, pageInfo).then((res) => {
            this.cutDataList(res);
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //上传前的校验
    handleBeforeUpload(file) {
      const uploadTypes = ["xlsx", "xls"];
      const filetype = file.name.replace(/.+\./, "");
      const isRightSize = (file.size || 0) / 1024 / 1024 < this.fileSize;
      if (!isRightSize) {
        this.$message.error("文件大小超过 " + this.fileSize + "MB");
        return false;
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message:
            "请上传后缀名为xls,xlsx的附件",
        });
        return false;
      }
      return true;
    },
    //文件数量改变
    handleChangeFile(file, fileList) {
      this.fileList = fileList;
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
    },
    //导入的xls传到后端
    handleImport() {
      //上传文件的需要FormData类型;所以要转
      const FormDates = new FormData();
      this.fileList.forEach((val) => {
        FormDates.append("files", val.raw);
      });
      this.$http.post("/user/import",
        FormDates, {headers: {"Content-Type": "",}}
      ).then(() => {
        this.getDataList();
      });
    },
    //更改账号状态
    changeZt(zh) {
      const data = {
        zh: zh,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex)
      }
      this.$http.post("/user/changeZt", data).then(res => {
        if (res !== null) {
          this.cutDataList(res)
        }
      })
    },
    //打开编辑菜单页面
    openDialogMenu(item) {
      this.menu = [];
      this.menu1 = [];
      this.AllMenu = [];
      this.ChangeEmployee = "";
      this.$http.post("/menu/getListByZh/" + item.zh).then((res) => {
        this.menu = res;
        this.menu1 = JSON.parse(JSON.stringify(res));
      });
      this.$http.post("/menu/getList").then((res) => {
        this.AllMenu = res;
      });
      this.dialogFormVisibleMenu = true;
      this.ChangeEmployee = item.zh;
    },
    //账号添加菜单
    InsertMenu(data) {
      const id = data.menuId;
      if (this.menu.includes(id)) {
        if (data.children !== null) {
          data.children.forEach(child => {
            this.menu = this.menu.filter((item) => {
              return item !== child.menuId;
            });
          })
        }
        this.menu = this.menu.filter((item) => {
          return item !== id;
        });
      } else {
        this.menu.push(id)
        if (data.parentId !== 0) {
          this.menu.push(data.parentId)
        }
      }
      //去重
      this.menu = [...new Set(this.menu)];
    },
    //账号更改菜单
    changeMenu() {
      const data = {
        newMenu: this.menu,
        oldMenu: this.menu1,
        zh: this.ChangeEmployee
      }
      this.$http.post("/menu/changeMenuForEmployee", data);
      this.dialogFormVisibleMenu = false;
    },
    //打开编辑权限页面
    openDialogPerm(item) {
      this.perm = [];
      this.AllPerm = [];
      this.ChangeEmployee = "";
      this.$http.post("/perm/getListByZh/" + item.zh).then((res) => {
        this.perm = res;
      });
      this.$http.post("/perm/getList").then((res) => {
        this.AllPerm = res;
      });
      this.dialogFormVisiblePerm = true;
      this.ChangeEmployee = item.zh;
    },
    //账号添加菜单
    InsertPerm(data) {
      const id = data.perm;
      if (this.perm.includes(id)) {
        this.perm = this.perm.filter((item) => {
          return item !== id;
        });
      } else {
        this.perm.push(id)
      }
      //去重
      this.perm = [...new Set(this.perm)];
    },
    //账号更改权限
    changePerm() {
      const data = {
        perm: this.perm,
        zh: this.ChangeEmployee
      }
      this.$http.post("/perm/changePermForEmployee", data);
      this.dialogFormVisiblePerm = false;
    }
  },
  mounted() {
    this.getDataList();
  },
};
</script>
